<template>
  <div class="similar-feature-tag">
    <el-row>
      <el-col :span="11">
        <div class="list-wrapper">
          <el-collapse v-model="type" accordion @change="handleChange" class="tag-scrollbar">
            <template v-for="item in list">
              <el-collapse-item v-if="item.listTypeId !== 7" :key="item.listTypeId" :name="item.listTypeId">
                <template slot="title">
                  <icon-svg :name="item.listTypeId | typeIcon"></icon-svg>
                  {{ item.listType }} （{{ item.listTagNum }}）
                </template>
                <div class="tag-wrap" v-loading="loading">
                  <feature-catalog
                    v-if="item.listTypeId === 1"
                    :loading="loading"
                    :selectedList="selectedList"
                    @toggleLoading="toggleLoading"
                    @addItem="addItem"
                  ></feature-catalog>
                  <feature-list
                    :listType="item.listTypeId"
                    :key="item.listTypeId"
                    :ref="'factoryList' + item.listTypeId"
                    :loading="loading"
                    :selectedList="selectedList"
                    @toggleLoading="toggleLoading"
                    @addItem="addItem"
                    v-else
                  ></feature-list>
                </div>
              </el-collapse-item>
            </template>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="2">
        <span class="add-icon">
          <i class="el-icon-d-arrow-right"></i>
          <el-button type="primary" size="mini" @click="addTmpl">保存为模板</el-button>
        </span>
      </el-col>
      <el-col :span="11">
        <div class="list-wrapper">
          <div class="list-box">
            <tag-content-header>
              <template #title>
                <span>已选标签列表</span>
              </template>
            </tag-content-header>
          </div>
          <div class="list-content">
            <ul class="list tag-scrollbar">
              <li v-for="item in selectedList" :key="item.tagId">
                {{ item.tagNm }}
                <el-button icon="el-icon-close" size="mini" plain circle @click="removeTag(item)"></el-button>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
    <tag-tmpl-drawer ref="tagTmplDrawer" :tmplType="3"></tag-tmpl-drawer>
  </div>
</template>

<script>
import featureCatalog from './feature-catalog'
import featureList from './feature-list'
export default {
  props: {
    selectedList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  components: {
    featureCatalog,
    featureList
  },
  data() {
    return {
      loading: false,
      type: 1,
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleChange(val) {
      if (val && val !== 1 && this.$refs['factoryList' + val][0].getList) this.$refs['factoryList' + val][0].getList()
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tagFactory/factoryListType'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = []
          for (let i in data.data) {
            let item = Object.assign({}, data.data[i], { children: [] })
            this.list.push(item)
          }
          this.type = data.data[0].listTypeId
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toggleLoading(loading) {
      this.loading = loading
    },
    addItem(tag) {
      this.selectedList.push({
        tagId: tag.assetId,
        tagNm: tag.assetNm,
        tableNm: tag.labTbl,
        fieldNm: tag.labFldMap,
        dbVal: tag.dbVal
      })
    },
    removeTag(item) {
      let index = this.selectedList.findIndex(v => v.tagId === item.tagId)
      if (index >= 0) this.selectedList.splice(index, 1)
    },
    addTmpl() {
      if (!this.selectedList.length) {
        this.$message.info('请选择标签！')
        return
      }
      this.$refs.tagTmplDrawer.showDrawer({ json: JSON.stringify(this.selectedList) })
    }
  },
  filters: {
    typeIcon(val) {
      let icon = ''
      switch (val) {
        case 1:
          // 全部
          icon = 'iconFactoryAll'
          break
        case 3:
          // 我的关注
          icon = 'iconFactoryWatch'
          break
        case 4:
          // 我的专辑
          icon = 'iconFactoryAlbum'
          break
        case 5:
          // 猜你喜欢
          icon = 'iconFactoryFav'
          break
        case 6:
          // 热门
          icon = 'iconFactoryHot'
          break
        case 7:
          // 计算型标签
          icon = 'iconCalculateTag'
          break
      }
      return icon
    }
  }
}
</script>

<style lang="scss">
.similar-feature-tag {
  height: 500px;
  .el-row,
  .el-col,
  .list-wrapper {
    height: 100%;
  }
  .el-collapse {
    height: 100%;
    color: #fff;
    background-color: #ebeef5;
    overflow-y: auto;
  }
  .el-collapse-item__header {
    font-size: 15px;
    font-weight: bold;
    padding: 0 10px 0 20px;
    color: inherit;
    background-color: #6a86cc;
    border-color: #fff;
    svg {
      width: 25px;
      height: 25px;
      margin-right: 8px;
    }
  }
  .el-collapse-item__content {
    background-color: #f0f4f7;
    padding: 10px 0;
    line-height: 1;
  }
  .el-collapse-item__wrap {
    border: 0;
  }
  .el-col {
    position: relative;
  }
  .add-icon {
    color: $theme-color;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    i {
      font-size: 25px;
    }
  }
  .list-wrapper {
    padding: 10px 20px;
    position: relative;
    .list-box {
      height: 100%;
      border: 1px solid $theme-color;
      border-radius: 5px;
      .tag-content-header {
        margin: 0;
        padding: 0 20px;
        border-bottom: 1px solid $border-color;
        .title-box {
          height: 40px;
          line-height: 40px;
        }
      }
    }
    .list-content {
      padding: 0 10px;
      position: absolute;
      top: 60px;
      right: 20px;
      bottom: 20px;
      left: 20px;
      overflow-y: auto;
      ul.list {
        height: 100%;
        overflow-y: auto;
        li {
          padding: 0 50px 0 20px;
          line-height: 40px;
          position: relative;
          &:hover {
            color: #fff;
            background-color: #a2abd9;
            .el-button {
              display: block;
            }
          }
          .list-item {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .tip {
            color: $theme-color;
          }
          .select-tip {
            color: #666;
          }
          .el-button {
            display: none;
            margin-top: 5px;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 10px;
            &:hover {
              color: #fff;
              background-color: $theme-color;
            }
          }
          .tip,
          .add-btn {
            position: absolute;
            top: 0;
            right: 10px;
          }
        }
      }
      .el-pagination {
        text-align: center;
      }
    }
  }
  .tag-wrap {
    .el-input {
      padding: 0 20px;
      margin: 5px 0 10px 0;
    }
    .el-input__inner {
      height: 35px;
      line-height: 35px;
      background-color: inherit;
      border-color: #455fbc;
    }
    .el-input__icon {
      line-height: 1 !important;
    }
    .el-input-group__append {
      padding: 0 15px;
      border-color: #455fbc;
      background-color: #455fbc;
      svg {
        width: 20px;
        height: 20px;
        color: #fff;
      }
    }
    .el-input__suffix {
      right: 20px;
    }
  }
}
</style>
